

//多个属性值的值渐变的框架
//通过json来传入需要改变的属性和值,再遍历json来实现改变多个属性的目的
//注意,json的value需要传入数组,[0]为初始值,[1]为期望值-----修改了代码,不再需要
//原来使用的currentVal targetVal无法使用了,因为2层循环会使得变量冲突-----可以用了
function multiValDivChange(obj, json, nextFunc = function () {}, denominator = 5) {

    clearInterval(obj.timer);
    console.log('start');

    obj.timer = setInterval(function () {
        let isFin = true;   //表示标记,已经完成所有变化

        for(let prop in json) {

            obj.current;

            let currentVal = parseFloat(obj.style[prop]);  //获取的数值有时候是''或者'20 px'
            let targetVal = json[prop];

            if (currentVal !== targetVal) isFin = false;  //如果需要变换则让标记为false

            //透明度的情况
            if (prop === 'opacity') {
                if (isNaN(currentVal)) {    //parseFloat如果获取了'',会返回NaN,判断如果是NaN则表示是第一次获取,设置初始值(没有办法从offset中获取)
                    if (json[prop] === 1) {
                        currentVal = 0.2;   //default opacity value;
                    } else currentVal = 1;
                    obj.style[prop] = currentVal;
                }

                //处理透明度,因为透明度是[0,1],所以乘以100
                let speed = targetVal > currentVal ?
                    Math.ceil((targetVal * 100 - currentVal * 100) / denominator) : Math.floor((targetVal * 100 - currentVal * 100) / denominator);
                obj.style[prop] = currentVal + speed/(denominator+80); //+80:变色太快,添加增量

                //因为是小数很难让2者完全相等,所以设置当到精度到达时使2者相等
                if (Math.abs(currentVal - targetVal) <= 0.0099) currentVal = targetVal;

            //修改长宽的情况
            } else {
                if (isNaN(currentVal)) {    //获取到nan则表示行间样式没有被设定
                    if (prop === 'width') {
                        currentVal = obj.offsetWidth;

                    }else if (prop === 'height') {
                        currentVal = obj.offsetHeight;
                    }
                }
                //处理带px的属性
                let speed = targetVal > currentVal ?
                    Math.ceil((targetVal - currentVal) / denominator) : Math.floor((targetVal - currentVal) / denominator);
                obj.style[prop] = currentVal + speed +  'px';
            }
        }

        if (isFin) {
            clearInterval(obj.timer);
            console.log('finished');
            nextFunc();
        }
    },25);
}